<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue-mock-exam</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <header class="home-header">header</header>
    <div id="vue-app" class="app-wrapper">
      <exam-title></exam-title>
        <exam-side></exam-side>
        <exam-main></exam-main>
    </div>
    <!-- 标题模板 -->
    <script type="text/x-template" id="exam-title">
      <div class="title-wrapper" ref="titleTop">
        <span v-show="showPoints" class="title-scores">{{points}}</span>
        <h2>驾照考试</h2>
        <p>本试卷共分为25题，作答时间为100分钟，总共100分</p>
      </div>
    </script>
    <!-- 侧边模板 -->
    <script type="text/x-template" id="exam-side">
      <div class="side-wrapper" v-bind:style="isFixed ? styleFixed : ''">
        <div class="side-title">
          <p>剩余时间<span class="remaining">{{remainingTime}}</span></p>
          <button class="compute-btn" v-on:click="onCalClick">
            计算器
            <div class="cal-wrapper" v-if="showCal">
              <div class="cal-title">
                <span class="cal-desc">计算器</span>
                <span class="cal-close" v-on:click="onCalClose">X</span>
              </div>
              <iframe src="./webcal.html" frameborder="0" style="width:100%;height:400px;">
              </iframe>
            </div>
          </button>
        </div>
        <hr />
        <div>
          <div class="answer-sheet">答题卡<span class="countCard">{{count}} / {{sideList.length}}</span></div>
          <hr>
          <div><span>单项选择</span></div>
          <div>
            <span 
              v-for="(item, index) of sideList" 
              :class="sideItemList[index] ? 'side-item done' : 'side-item'"
              v-on:click="handleSideSpanClick(index)"
              v-bind:style="scoreList[index] ? styleGreen : styleRed"
              :key="item.id"
            >
              {{ index + 1 }}
            </span>
          </div>
          <button :class="isDisabled ? 'hand-btn-disabled hand-btn' : 'hand-btn' " v-on:click="handleHandClick" :disabled="isDisabled">交卷</button>
        </div>
      </div>
    </script>
    <!-- 考试试题模板 -->
    <script type="text/x-template" id="exam-questions">
      <ul class="list-wrapper">
        <div v-for="(item, index) of questionsList" :key="item.id" ref="questions">
          <div class="item-wrapper">
              <div><span>{{ index + 1 }}. </span>{{ item.question }}</div>
              <p><span>A. </span>{{ item.item1 }}</p>
              <p><span>B. </span>{{ item.item2 }}</p>
              <p><span>C. </span>{{ item.item3 }}</p>
              <p><span>D. </span>{{ item.item4 }}</p>
              <div class="radio-wrapper" >
                <label  class="item-radio">
                  <input type="radio" value="A" :name="item.id"  v-on:click="onRadioClick($event, index, item.id)" :disabled="isRadioDisabled" :key="item.id"> A
                </label>
                <label  class="item-radio">
                  <input type="radio" value="B" :name="item.id" v-on:click="onRadioClick($event, index, item.id)" :disabled="isRadioDisabled" :key="item.id"> B
                </label>
                <label  class="item-radio">
                  <input type="radio" value="C" :name="item.id" v-on:click="onRadioClick($event, index, item.id)" :disabled="isRadioDisabled" :key="item.id"> C
                </label>
                <label  class="item-radio">
                  <input type="radio" value="D" :name="item.id" v-on:click="onRadioClick($event, index, item.id)" :disabled="isRadioDisabled" :key="item.id"> D
                </label>
              </div>
              <div v-if="answerShow">
                <div class="your-answer">你的答案：
                  <span :class="selectrdList[index] === item.answer ? 'showGreenColor' : 'showRedColor'">{{ selectrdList[index] }}</span>
                  <span class="your-score">你的得分: <span class="points" ref="allPoints">{{selectrdList[index] === item.answer ? answerScore : '0'}}</span></span>
                </div>
                <div class="right-answer">参考答案：
                  <span>{{ item.answer }}</span>
                  <div class="analysis">
                    <span>参考解析： {{ item.expalins }}</span>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </ul>
    </script>
    <footer class="home-footer">footer</footer>
  </body>
</html>
<script src="./js/vue-2.5.21.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/index.js"></script>
